<template>
	<div id="finance_flow">
		<el-form :inline="true" class="demo-form-inline" size="medium" :disabled="load">
			<el-form-item>
				<el-select v-model="requestParam.type" placeholder="支付类型" @change="search">
					<el-option value="" label="全部"></el-option>
					<el-option value="1" label="收入"></el-option>
					<el-option value="2" label="支出"></el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				
				<el-button type="primary" @click="dialogVisible = true">添加平台支出流水</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="list" stripe style="width: 100%" v-loading="load">
			<el-table-column prop="id" label="id" align="center"></el-table-column>
			<el-table-column label="金额" width="120" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.type == 1">+ {{scope.row.money | money}}</span>
					<span v-if="scope.row.type == 2" class="error">- {{scope.row.money | money}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="备注" align="center"></el-table-column>
			<el-table-column prop="status" label="状态" align="center">
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					<span>{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination 
			background
			layout="total, prev, pager, next"
			:page-size="requestParam.pageSize"
			:total="total"
		 	@current-change="getList"
			 class="margin_top20 align-right">
		</el-pagination>

		<el-dialog 
			title="添加平台支出流水" 
			:visible.sync="dialogVisible" 
			width="400px" 
			center 
			:before-close="handleClose"
			:close-on-click-modal="false"
		>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
				<el-form-item label="金额" prop="money">
					<el-input v-model="formData.money" placeholder="请输入支出金额（填写正数）"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				requestParam: {
					usId: '',
					startTime: '',
					endTime: '',
					pageSize: 10,
					isCount: false,
					type: '',
				},
				total: 0,
				load: false,
				date: [],

				formLoading: false,
				dialogVisible: false,
				formData: {
					name: '',
					address: '',
					remark: '',
					status:'1',
					sort:'',
				},
				rules: {
					money: {
						message: '请输入金额',
						trigger: 'blur',
						required: true
					},
					remark: {
						message: '请输入排序',
						trigger: 'blur',
						required: true
					}
				},
			};
		},

		mounted() {
			this.search(1)
		},

		methods: {
			// 获取列表
			getList(pageNo) {
				if (this.load) {
					return;
				}
				if (this.date && this.date.length) {
					this.requestParam.startTime = this.$moment(this.date[0]).format('Y-MM-DD HH:mm:ss')
					this.requestParam.endTime = this.$moment(this.date[1]).format('Y-MM-DD HH:mm:ss')
				} else {
					this.date = [];
					this.requestParam.startTime = ''
					this.requestParam.endTime = ''
				}
				this.load = true
				this.requestParam.pageNo = pageNo
				this.$request.post({
					url: '/ReportApi/admin/financeunflowlist',
					params: this.requestParam,
					success: result => {
						this.list = result[0]
						if (this.requestParam.isCount) {
							this.total = result[1]
							this.requestParam.isCount = false
						}
					},
					finally: () => {
						this.load = false
					}
				})
			},

			search() {
				this.requestParam.isCount = true;
				this.getList(1)
			},

			handleClose(done){
				this.reset()
				done();
			},
			add(){
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						}
						this.formLoading = true
						this.$request.post({
							url:'/ReportApi/admin/financeunaddflow',
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false 
								this.reset()
								this.search()
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			reset(){
				this.formData.money = '' 
				this.formData.remark = ''
			},
		}

	}
</script>

<style>

</style>

<style scoped>

</style>
